<template>
    <div>
        <div style="border-bottom:1px solid #999;margin-bottom:20px;margin-left:50px;padding-bottom: 20px;width: 80%">
            <div  ><h4>工单详情</h4></div>
            <div style="height:100px;background-color:#eee;padding-top:20px;width: 1100px">
            <div style="display: inline-block;height:80px;vertical-align: middle;width:160px;border-right: 1px solid #999;text-align:center">
                <p>工单编号</p>
                <p>67890</p>
            </div>
                <div style="display: inline-block;height:80px;vertical-align: middle;width:160px;border-right: 1px solid #999;text-align:center">
                    <p>工单状态</p>
                    <p>已分配</p>
                </div>
                <div style="display: inline-block;height:80px;vertical-align: middle;width:160px;border-right: 1px solid #999;text-align:center">
                    <p>提交时间</p>
                    <p>2017.11.28</p>
                </div>
                <div style="display: inline-block;height:80px;vertical-align: middle;width:160px;border-right: 1px solid #999;text-align:center">
                    <p>处理部门</p>
                    <p>客服部</p>
                </div>
                <div style="display: inline-block;height:80px;vertical-align: middle;width:160px;border-right: 1px solid #999;text-align:center">
                    <p>工单受理人</p>
                    <p>67890</p>
                </div>
                <div style="display: inline-block;height:80px;vertical-align: middle;width:160px;padding-left:30px">
                    <p>操作</p>
                    <el-button type="text" @click="openDialog('reply')">回复</el-button>
                    <el-button type="text" @click="openDialog('handOver')">移交受理人</el-button>
                </div>
            </div>
        </div>
        <div  style="margin-left:80px;margin-top:50px;border-bottom: 1px solid #999;width: 80%">
            <div  >
            <div>
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="地址:" style="width:300px">
                        123
                    </el-form-item>
                    <el-form-item label="屋顶类型:" style="width:300px">
                        123
                    </el-form-item>
                    <br>
                    <el-form-item label="联系方式:" style="width:300px">
                        123
                    </el-form-item>
                    <el-form-item label="屋面面积:" style="width:300px">
                        123
                    </el-form-item>
                    <br>
                    <el-form-item label="农户户数:" style="width:300px">
                        123
                    </el-form-item>
                    <el-form-item label="房产证:" style="width:300px">
                        123
                    </el-form-item>
                    <br>
                    <el-form-item label="屋顶照片:" style="width:300px">
                        123
                    </el-form-item>
                </el-form>
            </div>
            </div>
        </div>
        <div style="width: 80%;margin-left:80px">
            <h4>沟通记录</h4>
            <el-row>
                <el-col :span="3"><div><img src="" alt="">客服logo</div></el-col>
                <el-col :span="12">
                    <div>
                        <p><span style="color:green"> 客服：</span><span>2017.11.28</span> </p>
                        <p>您好，您的工单已受理，请耐心等待，谢谢</p>
                        <p>【处理意见】</p>
                        <p>我司已核实当地光伏政策，符合建站要求，我们会安排专业人士于您电话联系～</p>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" style="margin-left:150px">
                    <div>
                        <p><span style="color:green">我：</span><span>2017.11.28</span> </p>
                        <p>您好，您的工单已受理，请耐心等待，谢谢</p>
                        <p>我司已核实当地光伏政策，符合建站要求，我们会安排专业人士于您电话联系～</p>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" style="margin-left:150px">
                    <div>
                        <p>【附件】</p>
                    </div>
                </el-col>
            </el-row>
        </div>

        <el-dialog title="回复" :visible.sync="dialog.reply.open" v-if="dialog.reply.open" :modal="false" top="15%" size="tiny" :show-close="false" :close-on-click-modal="false">
            <div>
                <el-form>
                    <el-form-item>
                        <el-input type="textarea" ></el-input>
                    </el-form-item>
                </el-form>

            </div>
            <div style="margin: 40px">
                <el-button type="primary"  @click="sureR('reply')">确定</el-button>
                <el-button @click="noR('reply')">取消</el-button>
            </div>

        </el-dialog>
        <el-dialog title="移交受理人" :visible.sync="dialog.handOver.open" v-if="dialog.handOver.open" :modal="false" top="15%" size="tiny" :show-close="false" :close-on-click-modal="false">
            <div>
                <el-form>
                    <el-form-item>
                        <el-select  placeholder="">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div style="margin: 40px">
                <el-button type="primary"  @click="sureHand('handOver')">确定</el-button>
                <el-button @click="noHand('handOver')">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import Bus from '@/config/bus.js'
    import _http from '@/components/common/http.vue'
    import _param from '@/components/common/param.vue'
    import fabuxxi from '@/components/message/fabuxxi.vue'
    export default {
        components:{fabuxxi},
        data() {
            return {
                flagid:'',
                enterprise_logo:'',
//                logo企业id
                logoid:'',
                stateMessage:'',
                userid:'',


                apiPort:{
                    changePlace:'ecology/chart/upOrDown',
//                    联络状态接口
                    stateApi:'diction/getEnterpriseType',
///                    正副本列表页内容接口

                },
                fileUploadAction:_param.param.fileUploadUrl,
                activeName: 'second',
                labelPosition: 'right',
                originid:'',
                linkid:'',
                dialog:{
                    reply:{
                        open:false
                    },
                    handOver:{
                        open:false
                    },
                },
            };

        },
        mounted(){
            this.limit = JSON.parse(localStorage.getItem("limitList"))
            this.userid=localStorage.getItem('userId')
            this.pageAbout.userid = localStorage.getItem('userId')
            var that=this

        },
        methods: {
            sureR(par){
                this.closeDialog(par)
            },
            noR(par){
                this.closeDialog(par)
            },
            sureHand(par){
                this.closeDialog(par)
            },
            noHand(par){
                this.closeDialog(par)
            },
            getLinkstate(){
                var that = this
//				企业联络状态
                var stateCom={code:"contactState",userid:that.userid}
                var statesCom = that.querystring.stringify(stateCom)
                _http.axiosRequest(that,that.apiPort.stateApi,statesCom,(res)=>{
                    that.stateMessage=res.data.data
            })
            },
            openDialog(dialog){
                this.dialog[dialog].open = true
            },
            closeDialog(dialog){
                this.dialog[dialog].open = false
            },
            //跳转到指定页
//
            go(){
                this.$router.push({path:'/message/fabuxxi',query:{info:1,page:this.currentPage}})
            },
            edit(id){
                this.$router.push({path:'/message/fabuxxi',query:{info:id,page:this.currentPage}})
            },
            look(id){
                this.$router.push({path:'/ecological/look',query:{info:id}})
            }
        }
    };
</script>
<style>
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
</style>